/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <div class="subject">
        <h3>粉丝列表</h3>
        <h5>粉丝列表管理</h5>
      </div>
    </div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>关注本公众号的粉丝在此列表显示</li>
          <li>若要同步粉丝信息，请清除缓存，自动同步</li>
          <li>服务号才可以按选定的多个用户进行群发，订阅号没这个权限</li>
          <li>服务号和订阅号都可以使用发送所有粉丝功能，群发的次数一个月最多4次，一天最多1次</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <div class="mDiv">
      <div class="ftitle">
        <h3>粉丝列表</h3>
        <h5>(共 {{totalCount}} 条记录)</h5>
      </div>
      <!-- <div class="fbutton">
        <div class="add" @click="sendTextMsg()">
          <span>
            <i class="el-icon-circle-plus" /> 发送文本信息
          </span>
        </div>
      </div>
      <div class="fbutton">
        <div class="add" @click="sendNewsMsg()">
          <span>
            <i class="el-icon-circle-plus" /> 发送图文信息
          </span>
        </div>
      </div>-->
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
    </div>
    <div class="tablebox">
      <el-table :data="tableData" ref="multipleTable" style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="头像" width="100">
          <template scope="scope">
            <el-image :src="scope.row.head_img_url" style="width:40px;height:40px;" />
          </template>
        </el-table-column>
        <el-table-column label="openid" prop="open_id" width="250" show-overflow-tooltip></el-table-column>
        <el-table-column label="昵称" prop="nickname" width="130"></el-table-column>
        <el-table-column label="性别" prop="sex" width="100">
          <template
            slot-scope="scope"
          >{{scope.row.sex == 1 ? "男" : scope.row.sex == 2 ? "女" : "未知"}}</template>
        </el-table-column>
        <el-table-column label="所在地" width="200" show-overflow-tooltip>
          <template
            slot-scope="scope"
          >{{scope.row.country + "-" + scope.row.province + "-" + scope.row.city}}</template>
        </el-table-column>
        <el-table-column label="用户语言" prop="language" width="100"></el-table-column>
        <el-table-column label="关注时间" width="130">
          <template slot-scope="scope">{{scope.row.subscribe_time | datefmtYMDHM}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="small"
                @click="userInfo(scope.row.user_id)"
                v-if="scope.row.user_id"
                icon="el-icon-user"
              >会员</el-button>
              <el-button size="small" @click="wechatInfo(scope.row)" icon="el-icon-zoom-in">微信</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="paginationbox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
    <el-dialog
      title="微信粉丝详细信息"
      :visible.sync="centerDialogVisible"
      width="600px"
      center
      :modal-append-to-body="false"
    >
      <el-form label-width="100px">
        <el-form-item label="OpenID：">{{form.open_id}}</el-form-item>
        <el-form-item label="昵称：">{{form.nickname}}</el-form-item>
        <el-form-item label="性别：">{{form.sex == 1 ? "男" : form.sex == 2 ? "女" : "未知"}}</el-form-item>
        <el-form-item label="所在地：">{{form.country + "-" + form.province + "-" + form.city}}</el-form-item>
        <el-form-item label="用户语言：">{{form.language}}</el-form-item>
        <el-form-item label="头像地址：">
          <el-image :src="form.head_img_url" style="width:96px;height:96px;" />
          <br />
          <el-input v-model="form.head_img_url" class="head-img"></el-input>
        </el-form-item>
        <el-form-item label="关注时间：">{{form.subscribe_time | datefmtAll}}</el-form-item>
        <el-form-item label="备注：">{{form.remark}}</el-form-item>
        <el-form-item label="标签列表：">{{form.tag_list}}</el-form-item>
        <el-form-item label="粉丝来源：">{{form.subscribe_scene}}</el-form-item>
        <!-- <el-form-item label="开放平台ID：">{{form.union_id}}</el-form-item> -->
        <!-- <el-form-item label="分组ID：">{{form.group_id}}</el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {} from "@/utils/api";
export default {
  data() {
    return {
      tableData: [],
      currentPage: this.$route.params.currentPage || 1,
      totalCount: 0,
      pageSize: 10,
      centerDialogVisible: false,
      form: {}
    };
  },
  created() {
    this.getPage();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getPage();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getPage();
    },
    getPage() {
      var that = this;
      this.request
        .get("/mall/wechat/follower/page", {
          params: {
            page: that.currentPage,
            size: that.pageSize
          }
        })
        .then(function(res) {
          if (!res.msg) {
            that.tableData = res.we_chat_follower_users;
            that.totalCount = res.total;
          } else {
            that.$message.error(res.msg);
          }
        });
    },
    refresh() {
      this.getPage();
      this.$message.success("刷新成功！");
    },
    update(row) {
      var that = this;
      this.request.put("/mall/wx_news", row).then(res => {
        if (res.status == 1) {
          that.$message.success("更新成功");
          that.getPage();
        } else {
          that.$message.error(res.msg);
        }
      });
    },
    remove(id) {
      var that = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.request.delete("/mall/wx_news?id=" + id).then(res => {
            if (res.status == 1) {
              that.getPage();
              that.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              that.$message.error({
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          that.$message.info({
            message: "已取消删除"
          });
        });
    },
    sendTextMsg() {},
    sendNewsMsg() {},
    userInfo(userId) {
      this.$router.push({
        name: "member_details",
        params: {
          user_id: userId,
          currentPage: this.currentPage
        }
      });
    },
    wechatInfo(row) {
      this.form = row;
      this.centerDialogVisible = true;
    }
  }
};
</script>

<style scoped>
>>> .head-img .el-input__inner {
  width: 400px;
}
</style>
